<template>
  <div>
    <BasicModal
      :title="$t('table.member.member_rate_config')"
      :okText="$t('table.system.system_conform_save')"
      :showCancelBtn="false"
      @register="registerNewModal"
      :width="900"
      @ok="onUpdate"
    >
      <Loading v-if="loading" :loading="loading" :absolute="false" />
      <div class="pb-[30px]" v-else>
        <Form-item
          style="margin-left: 10px"
          :labelCol="{ span: labelCol }"
          :name="`${$t('modalForm.member.member_mode_selection')}`"
          :label="`${$t('modalForm.member.member_mode_selection')}:`"
        >
          <Radio-group v-model:value="tableConifg.mode">
            <Radio v-for="item in options.mode" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Radio>
          </Radio-group>
        </Form-item>
        <Form-item
          style="margin-left: 10px"
          :labelCol="{ span: labelCol }"
          :name="`${$t('modalForm.member.member_issuance_time_zone')}`"
          :label="`${$t('modalForm.member.member_issuance_time_zone')}:`"
        >
          <Select
            v-model:value="tableConifg.settle_tz"
            style="width: 580px"
            size="large"
            :placeholder="$t('common.inputText')"
          >
            <Select-option v-for="item in options.timeZone" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Select-option>
          </Select>
        </Form-item>
        <Form-item
          style="margin-left: 10px"
          :labelCol="{ span: labelCol }"
          :name="t('table.system.system_delivery_time')"
          :label="`${t('table.system.system_delivery_time')}:`"
        >
          <Select
            v-model:value="tableConifg.settle_at"
            style="width: 580px"
            size="large"
            :placeholder="$t('common.inputText')"
          >
            <Select-option v-for="item in options.timeData" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Select-option>
          </Select>
        </Form-item>
        <Form-item
          v-if="tableConifg.mode === '1'"
          :labelCol="{ span: labelCol }"
          style="margin-left: 10px"
          :name="`${t('table.system.system_issue_way')}VIP`"
          :label="`${t('table.system.system_issue_way')}:`"
        >
          <Select v-model:value="tableConifg.automatic1" style="width: 580px" size="large">
            <Select-option
              v-for="item in options.automaticVIP"
              :key="item.label"
              :value="item.value"
              >{{ item.label }}
            </Select-option>
          </Select>
        </Form-item>
        <Form-item
          v-else
          style="margin-left: 10px"
          :labelCol="{ span: labelCol }"
          :name="t('modalForm.member.member_distribution_method_tiers')"
          :label="`${t('table.system.system_issue_way')}:`"
          size="large"
        >
          <Select v-model:value="tableConifg.automatic2" style="width: 580px" size="large">
            <Select-option
              v-for="item in options.automaticTiji"
              :key="item.label"
              :value="item.value"
              >{{ item.label }}
            </Select-option>
          </Select>
        </Form-item>
        <Form-item
          v-if="tableConifg.mode === '1'"
          style="margin-left: 10px"
          :labelCol="{ span: labelCol }"
          :name="t('modalForm.member.member_level_selection')"
          :label="`${t('modalForm.member.member_level_selection')}:`"
        >
          <Radio-group v-model:value="tableConifg.levelChooice" @change="changeLevelChooice">
            <Radio v-for="item in options.levelChooice" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Radio>
          </Radio-group>
        </Form-item>
        <Form-item
          v-if="tableConifg.mode === '2'"
          style="margin-left: 10px"
          name="场馆模式"
          label="场馆模式:"
        >
          <Radio-group v-model:value="tableConifg.unified_sum" name="场馆模式" @change="changVenue">
            <Radio v-for="item in options.unified_sum" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Radio>
          </Radio-group>
        </Form-item>
        <Form-item
          v-if="tableConifg.mode === '2'"
          style="margin-left: 10px"
          name="场馆选择"
          label="场馆选择:"
        >
          <Radio-group
            v-model:value="tableConifg.venue"
            name="场馆选择"
            :disabled="tableConifg.unified_sum == 1"
          >
            <Radio v-for="item in options.venue" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Radio>
          </Radio-group>
        </Form-item>
        <Form-item
          v-if="tableConifg.mode === '2'"
          :labelCol="{ span: labelCol }"
          style="margin-left: 10px"
          :name="t('modalForm.member.member_currency_selection')"
          :label="`${t('modalForm.member.member_currency_selection')}:`"
        >
          <Radio-group
            v-model:value="tableConifg.unified"
            :name="t('modalForm.member.member_currency_selection')"
          >
            <Radio v-for="item in options.unified" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Radio>
          </Radio-group>
        </Form-item>
        <Form-item
          v-if="tableConifg.mode === '2' && tableConifg.unified === '2'"
          :labelCol="{ span: labelCol }"
          style="margin-left: 10px"
          :name="t('modalForm.member.member_currency_type')"
          :label="`${t('modalForm.member.member_currency_type')}:`"
        >
          <Radio-group v-model:value="tableConifg.currency_type">
            <Radio v-for="item in options.currency_type" :key="item.label" :value="item.value"
              >{{ item.label }}
            </Radio>
          </Radio-group>
        </Form-item>
        <!-- vip 等级 > 单独配置 -->
        <div v-if="tableConifg.mode === '1' && tableConifg.levelChooice === '2'">
          <Space class="space-box">
            <Button
              :class="{ 'ant-btn-primary': VIPLevelActiveIndex === +index }"
              class="w-[53px] h-[36px]"
              style="padding: 0 !important"
              v-for="(item, index) in allVipConfig"
              :key="index"
              @click="changeVIPLevelActiveIndex(item, index)"
              >{{ 'VIP' + item.level }}</Button
            >
          </Space>
        </div>
        <!-- 梯级 > 单独货币 > 法币-->
        <div
          class="ml-[10px]"
          v-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1'
          "
        >
          <Space class="space-box">
            <Button
              :class="{ 'ant-btn-primary': currentCurrencyFaIndex === index }"
              class="w-24"
              v-for="(item, index) in suportedCurrency.fabi"
              :key="index"
              size="large"
              @click="
                currentFaCurrency = item;
                currentCurrencyFaIndex = index;
              "
            >
              <div class="flex align-center">
                <CdIconCurrency class="!w-4 mr-[6px]" :icon="currencyCodeMap[item].name" />
                {{ currencyCodeMap[item].name }}
              </div>
            </Button>
          </Space>
        </div>
        <!-- 梯级 > 单独货币 > 加密货币-->
        <div
          class="ml-[10px]"
          v-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '2'
          "
        >
          <Space class="space-box">
            <Button
              :class="{ 'ant-btn-primary': currentCurrencyCindex === index }"
              class="w-24"
              size="large"
              v-for="(item, index) in suportedCurrency.crypto"
              :key="index"
              @click="
                currentCCurrency = item;
                currentCurrencyCindex = index;
              "
            >
              <div class="flex align-center">
                <CdIconCurrency class="!w-4 mr-[6px]" :icon="currencyCodeMap[item].name" />
                {{ currencyCodeMap[item].name }}
              </div>
            </Button>
          </Space>
        </div>
        <!-- VIP模式 -->
        <yhTabs
          v-if="tableConifg.mode === '1'"
          :key="tableConifg.levelChooice + VIPLevelActiveIndex"
          v-model="dragTabIndex"
          :tabList="dragTabList.vip"
          dragKey="game_type"
          groupName="vip"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <Draggable
                v-if="item.data"
                :list="item.data"
                class="flex flex-wrap"
                :item-key="item.game_type"
                @end="dragVenueEnd(item)"
              >
                <template #item="{ element }">
                  <div v-if="element['show'] == 1" class="drawborder">
                    <img class="prefix-icon-move move cursor moveIcon" :src="dragger" />
                    <Form layout="vertical">
                      <FormItem labelAlign="left">
                        <template #label>
                          <span>{{ element['name'] }}</span>
                        </template>
                        <Input
                          size="large"
                          class="!w-30"
                          :placeholder="$t('common.inputText')"
                          v-model:value="element['rate']"
                          addon-after="%"
                        />
                      </FormItem>
                    </Form>
                  </div>
                </template>
              </Draggable>
            </div>
          </template>
        </yhTabs>
        <!-- 统一币种 -->
        <yhTabs
          v-if="tableConifg.mode === '2' && tableConifg.unified === '1'"
          :key="forceUpdate"
          v-model="dragTabIndex"
          :tabList="dragTabList[0]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        v-if="element['show'] == 1"
                        class="flex justify-center align-center h-[42px] border-[1px] border-solid border-[#E1E1E1] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="w-[20px] prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-if="column.key === 'unified_cur'">
                    <Select
                      v-model:value="tableConifg.unified_cur"
                      label-in-value
                      style="width: 120px"
                      :dropdown-match-select-width="false"
                      @change="handleChange"
                      :placeholder="t('common.chooseText')"
                      option-label-prop="children"
                    >
                      <SelectOption
                        v-for="item of options_coin"
                        :key="item.value"
                        :value="item.value"
                      >
                        <div style="display: flex">
                          <div class="w-18px h-18px mr-1 -mt-1px">
                            <cdIconCurrency
                              :icon="currentyOptions[item.value]"
                              class="w-18px mt--3px"
                            />
                          </div>
                          {{ item.label }}
                        </div>
                      </SelectOption>
                    </Select>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only4decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only4decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 4 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-150px' : '!w-150px']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(0)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(0)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- CNY -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1' &&
            currentFaCurrency === '701'
          "
          :key="forceUpdate + 1"
          v-model="dragTabIndex"
          :tabList="dragTabList[701]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only2decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only2decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 2 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[701].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(701)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(701)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- BRL -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1' &&
            currentFaCurrency === '702'
          "
          :key="forceUpdate + 2"
          v-model="dragTabIndex"
          :tabList="dragTabList[702]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only2decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only2decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 2 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[702].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(702)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(702)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- VND -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1' &&
            currentFaCurrency === '703'
          "
          :key="forceUpdate + 3"
          v-model="dragTabIndex"
          :tabList="dragTabList[703]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only2decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only2decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 2 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[703].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(703)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(703)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- INR -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1' &&
            currentFaCurrency === '704'
          "
          :key="forceUpdate + 4"
          v-model="dragTabIndex"
          :tabList="dragTabList[704]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only2decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only2decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 2 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[704].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(704)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(704)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- THB -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1' &&
            currentFaCurrency === '705'
          "
          :key="forceUpdate + 5"
          v-model="dragTabIndex"
          :tabList="dragTabList[705]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only2decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only2decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 2 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[705].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(705)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(705)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- EUR -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1' &&
            currentFaCurrency === '710'
          "
          :key="forceUpdate + 6"
          v-model="dragTabIndex"
          :tabList="dragTabList[710]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only2decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only2decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 2 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[710].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(705)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(705)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- JYP -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '1' &&
            currentFaCurrency === '711'
          "
          :key="forceUpdate + 7"
          v-model="dragTabIndex"
          :tabList="dragTabList[711]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only2decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only2decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 2 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[711].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(705)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(705)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
        <!-- USDT -->
        <yhTabs
          v-else-if="
            tableConifg.mode === '2' &&
            tableConifg.unified === '2' &&
            tableConifg.currency_type === '2' &&
            currentCCurrency === '706'
          "
          :key="forceUpdate + 8"
          v-model="dragTabIndex"
          :tabList="dragTabList[706]"
          dragKey="game_type"
          groupName="2"
          class="moveTable"
          @drag-end="dragEnd"
        >
          <template #default="{ item }">
            <div class="yh-tab-pane">
              <!-- 梯级 > 场馆拖拽-->
              <div v-if="tableConifg.venue == '1'">
                <Space class="space-box">
                  <Draggable
                    :list="dragTabList[getKey()][dragTabIndex].config[0].data"
                    class="flex flex-wrap"
                    item-key="id"
                    @end="dragVenueEnd(dragTabList[getKey()][dragTabIndex].config[0])"
                  >
                    <template #item="{ element }">
                      <div
                        class="border-[1px] border-solid border-[#1890ff] p-[8px] rounded-4px cursor text-[#1890ff] mr-[10px] mb-[10px]"
                      >
                        <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                        <span>{{ element['name'] }}</span>
                      </div>
                    </template>
                  </Draggable>
                </Space>
              </div>
              <Table
                :columns="getColumns()"
                :data-source="(item as any)?.config"
                :pagination="false"
                bordered
                size="small"
                style="width: 840px; max-height: 350px"
                :scroll="{ x: 830, y: 340 }"
                ref="myTable"
              >
                <template #headerCell="{ column, index }">
                  <template v-if="column.key === 'game'">
                    <span class="gameMove">
                      <img class="prefix-icon-move move cursor mr-2" :src="dragger" />
                      {{ column.title }}
                    </span>
                  </template>
                  <div v-else class="no-drag" :data-index="index">
                    {{ column.title }}
                  </div>
                </template>
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'level'">
                    <span>{{ record.level }}</span>
                  </template>
                  <template v-else-if="column.key === 'valid_bet_amount'">
                    <FormItem
                      :validate-status="only4decimals.test(record.valid_bet_amount) ? '' : 'error'"
                    >
                      <template
                        v-if="
                          record.valid_bet_amount && !only4decimals.test(record.valid_bet_amount)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit', { len: 4 }) }}</span>
                      </template>
                      <Input
                        :class="[tableConifg.venue === '1' ? '!w-60' : '!w-35']"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.valid_bet_amount"
                      >
                        <template #prefix>
                          <CdIconCurrency class="!w-5" :icon="currencyCodeMap[706].name" />
                        </template>
                      </Input>
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'rate'">
                    <FormItem
                      class="mr-0"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="only2decimalsMax100.test(record.rate) ? '' : 'error'"
                    >
                      <template v-if="record.rate && !only2decimalsMax100.test(record.rate)" #help>
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input
                        class="!w-40"
                        :placeholder="$t('common.inputText')"
                        v-model:value="record.rate"
                        addon-after="%"
                      />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'game'">
                    <FormItem
                      :name="index"
                      :label-col="{ style: { width: '120px' } }"
                      :validate-status="
                        only2decimalsMax100.test(record.data[column.index].rate) ? '' : 'error'
                      "
                    >
                      <template
                        v-if="
                          record.data[column.index].rate &&
                          !only2decimalsMax100.test(record.data[column.index].rate)
                        "
                        #help
                      >
                        <span>{{ t('modalForm.member.member_limit1') }}</span>
                      </template>
                      <Input v-model:value="record.data[column.index].rate" addon-after="%" />
                    </FormItem>
                  </template>
                  <template v-else-if="column.key === 'action'">
                    <Button v-if="index === 0" type="primary" size="large" @click="addRow(706)">{{
                      t('modalForm.member.member_increase')
                    }}</Button>
                    <Button
                      v-else-if="index === item.config.length - 1"
                      danger
                      type="primary"
                      size="large"
                      @click="delRow(706)"
                    >
                      {{ t('common.delText') }}
                    </Button>
                    <span v-else>-</span>
                  </template>
                </template>
              </Table>
            </div>
          </template>
        </yhTabs>
      </div>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, nextTick, ref } from 'vue';
  import {
    FormItem,
    Input,
    Button,
    Space,
    message,
    Table,
    Select,
    SelectOption,
    RadioGroup,
    Radio,
    Form,
  } from 'ant-design-vue';
  import yhTabs from '../common/yhTabs.vue';
  import Draggable from 'vuedraggable';
  import Loading from '/@/components/Loading/src/Loading.vue';
  import CdIconCurrency from '/@/components-cd/Icon/currency/cd-icon-currency.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { getMemberRebateConfig, updateMeberConfigRebate } from '/@/api/member/index';
  import { cloneDeep } from 'lodash-es';
  import { commomVenueList } from '/@/settings/commonSetting';
  import dragger from '/@/assets/svg/dragger.svg';
  import { useCurrencyStore } from '/@/store/modules/currency';
  import { currentyOptions } from '/@/views/common/commonSetting';
  import Sortable from 'sortablejs';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const { getCurrencyList } = useCurrencyStore();
  const only2decimals = /^\d+(\.\d{1,2})?$/;
  const only2decimalsMax100 = /^(100(\.0{1,2})?|(\d{1,2})(\.\d{1,2})?)$/;
  const only5decimalsMax100 = /^(100(\.0{1,2})?|([1-9]\d?)(\.\d{1,2})?)$/;
  const only4decimals = /^\d+(\.\d{1,4})?$/;
  const [registerNewModal, { closeModal }] = useModalInner(getInitData);
  import { useFormLabelWidth } from '/@/hooks/setting/useFormLabelSetting';
  const labelCol = ref(useFormLabelWidth('reverseWater'));
  const tableConifg = ref<Record<string, any>>({
    automatic1: '',
    automatic2: '',
    mode: '',
    levelChooice: '',
    venue: '',
    unified: '',
    unified_cur: '',
    currency_type: '',
    unified_sum: '1',
  });
  const loading = ref(true);
  const forceUpdate = ref(0);
  const currentFaCurrency = ref('701');
  const currentCCurrency = ref('706');
  const currentCurrencyFaIndex = ref(0);
  const currentCurrencyCindex = ref(0);
  //自定义变量
  const VIPLevelActiveIndex = ref(0);
  const myTable = ref(null);
  const tabLeft = ref(0);
  //统一的vip配置
  const onlyVipConfig = ref<any>({});
  const allVipConfig = ref<Record<string, any>>([]);
  const dragTabList = ref<any>({
    //vip
    vip: [],
    //梯级 统一币种
    0: [],
    //梯级 701币种
  });
  //支持的货币
  const suportedCurrency = ref<any>({
    fabi: ['701', '702', '703', '704', '705', '710', '711'],
    crypto: ['706'],
  });
  const usable_currency = ref(Object.values(suportedCurrency.value).flat());
  usable_currency.value = usable_currency.value.filter((item) => {
    return getCurrencyList.some((list_item) => list_item.id == item);
  });
  suportedCurrency.value.fabi = suportedCurrency.value.fabi.filter((item) => {
    return usable_currency.value.some((list_item) => list_item == item);
  });
  suportedCurrency.value.crypto = suportedCurrency.value.crypto.filter((item) => {
    return usable_currency.value.some((list_item) => list_item == item);
  });
  currentFaCurrency.value = suportedCurrency.value.fabi?.[0] ?? '';
  usable_currency.value.forEach((element) => {
    dragTabList.value[element as any] = [];
  });

  const currencyCodeMap = {
    '0': {
      name: 'USDT',
      icon: '111',
    },
    '701': {
      name: 'CNY',
      icon: '111',
    },
    '702': {
      name: 'BRL',
      icon: '111',
    },
    '703': {
      name: 'INR',
      icon: '111',
    },
    '704': {
      name: 'KVND',
      icon: '111',
    },
    '705': {
      name: 'THB',
      icon: '111',
    },
    '710': {
      name: 'EUR',
      icon: '111',
    },
    '711': {
      name: 'JPY',
      icon: '111',
    },
    '706': {
      name: 'USDT',
      icon: '111',
    },
  };
  const dragTabIndex = ref(0);
  //表格配置
  const options = {
    automaticVIP: [
      {
        label: t('modalForm.member.member_automatic_rebate'),
        value: '1',
      },
      {
        label: t('modalForm.member.member_pickup_the_next_day'),
        value: '2',
      },
      {
        label: t('modalForm.member.member_real_time_rebate'),
        value: '3',
      },
    ],
    timeZone: [
      { label: '中国 UTC+8', value: 'zh_CN' },
      { label: '巴西 UTC-3', value: 'pt_BR' },
      { label: '越南 UTC+7', value: 'vi_VN' },
      { label: '印度 UTC+5:30', value: 'hi_IN' },
      { label: '世界 UTC+0', value: 'utc' },
      { label: '美东时间 UTC-4', value: 'en_US' },
    ],
    timeData: [],
    automaticTiji: [
      {
        label: t('modalForm.member.member_automatic_rebate'),
        value: '1',
      },
      {
        label: t('modalForm.member.member_pickup_the_next_day'),
        value: '2',
      },
      {
        label: t('modalForm.member.member_real_time_rebate'),
        value: '3',
      },
    ],
    mode: [
      { label: t('modalForm.member.member_vip_model'), value: '1' },
      { label: t('modalForm.member.member_lv_model'), value: '2' },
    ],
    levelChooice: [
      { label: t('modalForm.member.member_unified_conf'), value: '1' },
      { label: t('modalForm.member.member_separate_configuration'), value: '2' },
    ],
    venue: [
      { label: t('modalForm.member.member_unified_venue'), value: '1' },
      { label: t('modalForm.member.member_separate_venue'), value: '2' },
    ],
    unified: [
      { label: t('modalForm.member.member_unified_currency'), value: '1' },
      { label: t('modalForm.member.member_separate_currency'), value: '2' },
    ],
    currency_type: [
      { label: '法币', value: '1' },
      { label: '加密货币', value: '2' },
    ],
    unified_sum: [
      { label: '合并计算', value: '1' },
      { label: '分开计算', value: '2' },
    ],
  };
  for (let hour = 4; hour <= 23; hour++) {
    options.timeData.push({
      label: `${hour}:00`,
      value: `${hour}`,
    });
  }

  function changVenue(e) {
    if (e.target.value == 1) tableConifg.value.venue = '1';
  }

  // 拖拽类型全都统一
  function dragEnd(data) {
    //拖拽终止
    if (!data.value) return;
    dragTabList.value[getKey()] = data;
    //要统一所有类型排序  真人 老虎机
    const orderList = data.value.map((item) => item.game_type);
    //先克隆统一赋值 防止页面渲染 先克隆不然等下值会找不到
    const dragTabList2 = cloneDeep(dragTabList.value);
    const onlyVipConfig2 = cloneDeep(onlyVipConfig.value);
    const allVipConfig2 = cloneDeep(allVipConfig.value);
    for (let key in dragTabList2) {
      if (key === 'vip') {
        //统一的vip配置
        onlyVipConfig2.forEach((item, index) => {
          onlyVipConfig2[index] = onlyVipConfig.value.find(
            (item2) => item2.game_type === orderList[index],
          );
        });
        // 单独配置的vip配置
        allVipConfig2.forEach((item, index) => {
          item.config.forEach((item2, index2) => {
            allVipConfig2[index].config[index2] = allVipConfig.value[index].config.find(
              (item3) => item3.game_type === orderList[index2],
            );
          });
        });
      } else {
        dragTabList2[key].forEach((item, index) => {
          dragTabList2[key][index] = dragTabList.value[key].find(
            (item2) => item2.game_type === orderList[index],
          );
        });
      }
    }
    //最后一起赋值
    onlyVipConfig.value = onlyVipConfig2;
    allVipConfig.value = allVipConfig2;
    dragTabList.value = dragTabList2;
    // console.log(111,dragTabList.value)
    //修改梯级模式vip需要重新赋值问题
    if (getKey() !== 'vip') {
      if (tableConifg.value.levelChooice === '1') {
        dragTabList.value.vip = onlyVipConfig;
      } else {
        dragTabList.value.vip = allVipConfig2[VIPLevelActiveIndex.value];
      }
    }
  }
  // 拖拽场馆分模式
  function dragVenueEnd(allData) {
    console.log(allData);
    if (!allData) return;
    const onlyVipConfig2 = cloneDeep(onlyVipConfig.value);
    const allVipConfig2 = cloneDeep(allVipConfig.value);
    const dragTabList2 = cloneDeep(dragTabList.value);
    const { data } = allData;
    const orderIDList = data.map((item) => item.id);
    if (tableConifg.value.mode === '1') {
      onlyVipConfig2[dragTabIndex.value].data.forEach((item, index) => {
        onlyVipConfig2[dragTabIndex.value].data[index] = onlyVipConfig.value[
          dragTabIndex.value
        ].data.find((item2) => item2.id === orderIDList[index]);
      });

      allVipConfig2.forEach((item, index) => {
        item.config[dragTabIndex.value].data.forEach((item2, index2) => {
          allVipConfig2[index].config[dragTabIndex.value].data[index2] = allVipConfig.value[
            index
          ].config[dragTabIndex.value].data.find((item3) => item3.id === orderIDList[index2]);
        });
      });
    } else {
      for (let key in dragTabList2) {
        if (key !== 'vip') {
          dragTabList2[key][dragTabIndex.value].config.forEach((item, index) => {
            item.data.forEach((item2, index2) => {
              dragTabList2[key][dragTabIndex.value].config[index].data[index2] = dragTabList.value[
                key
              ][dragTabIndex.value].config[index].data.find(
                (item3) => item3 && item3.id === orderIDList[index2],
              );
            });
          });
        }
      }
    }
    onlyVipConfig.value = onlyVipConfig2;
    allVipConfig.value = allVipConfig2;
    dragTabList.value = dragTabList2;
    forceUpdate.value += 1;
  }
  function getColumns() {
    if (tableConifg.value.mode === '2') {
      if (tableConifg.value.venue === '1') {
        if (tableConifg.value.unified == '1') {
          return [
            {
              title: t('modalForm.member.member_step'),
              key: 'level',
              align: 'center',
              fixed: 'left',
              width: 76,
            },
            {
              title: t('modalForm.member.member__currency_tip_1'),
              key: 'unified_cur',
              align: 'center',
              width: 200,
            },
            {
              title: `${t('table.report.report_valid_bet_amount')} ≥`,
              key: 'valid_bet_amount',
              align: 'center',
              width: 200,
            },
            {
              title: t('modalForm.member.member_rebate_ratio'),
              key: 'rate',
              align: 'center',
            },
            {
              title: t('business.common_operate'),
              key: 'action',
              align: 'center',
              fixed: 'right',
              width: 100,
            },
          ];
        } else {
          return [
            {
              title: t('modalForm.member.member_step'),
              key: 'level',
              align: 'center',
              fixed: 'left',
              width: 76,
            },
            {
              title: `${t('table.report.report_valid_bet_amount')} ≥`,
              key: 'valid_bet_amount',
              align: 'center',
              width: 400,
            },
            {
              title: t('modalForm.member.member_rebate_ratio'),
              key: 'rate',
              align: 'center',
            },
            {
              title: t('business.common_operate'),
              key: 'action',
              align: 'center',
              fixed: 'right',
              width: 100,
            },
          ];
        }
      } else if (
        tableConifg.value.venue === '2' &&
        dragTabList.value[getKey()][dragTabIndex.value].config[0].data
      ) {
        function createColumns(includeCurrency) {
          const baseColumns = [
            {
              title: t('modalForm.member.member_step'),
              dataIndex: 'level',
              align: 'center',
              width: 76,
            },
            {
              title: `${t('table.report.report_valid_bet_amount')} ≥`,
              key: 'valid_bet_amount',
              align: 'center',
              width: 160,
            },
            ...dragTabList.value[getKey()][dragTabIndex.value].config[0].data
              .filter((item) => item.show == 1) // Filter out items where show !== 1
              .map((item, index) => ({
                title: item.name,
                index: index,
                key: 'game',
                align: 'center',
                width: item.name.length > 16 ? 200 : item.name.length > 8 ? 140 : 120,
                className: 'tableShow', // Since we are filtering for show == 1, we can directly assign 'tableShow'
              })),
            {
              title: t('business.common_operate'),
              key: 'action',
              align: 'center',
              width: 100,
            },
          ];

          if (includeCurrency) {
            baseColumns.splice(1, 0, {
              title: t('modalForm.member.member__currency_tip_1'),
              key: 'unified_cur',
              align: 'center',
              width: 200,
            });
          }

          return baseColumns;
        }

        initSortable();

        return createColumns(tableConifg.value.unified == '1');
      }
    }
  }

  function initSortable() {
    setTimeout(() => {
      const tableHeader: any = document.querySelector('.moveTable .ant-table-thead tr');
      if (tableHeader) {
        Sortable.create(tableHeader, {
          animation: 150,
          filter: '.no-drag',
          preventOnFilter: true,
          onMove: (event: any, originalEvent: any) => {
            if (
              tableConifg.value.mode === '2' &&
              tableConifg.value.unified === '2' &&
              tableConifg.value.currency_type === '1'
            ) {
              if (
                originalEvent.target?.firstElementChild?.className &&
                originalEvent.target?.firstElementChild?.className == 'no-drag'
              ) {
                return false; // Cancels the drag operation
              }
              console.log(event);
            }
            return true; // Allows the drag operation to proceed
          },
          onEnd: (event: any) => {
            const tableElement = myTable.value?.$el;
            const tableBody = tableElement?.querySelector('.ant-table-body');
            if (tableBody) tabLeft.value = tableBody.scrollLeft;

            if (tableConifg.value.unified === '1') {
              if (event.newIndex == 0 || event.newIndex == 1 || event.newIndex == 2) {
                dragVenueEnd(dragTabList.value[getKey()][dragTabIndex.value].config[0]);
              }
              let oldIndex = event.oldIndex - 3;
              let newIndex = event.newIndex - 3;
              let newdata = dragTabList.value[getKey()][dragTabIndex.value].config[0];

              const filteredList = newdata.data.filter((item) => item.show == '1');

              const movedColumn = filteredList.splice(oldIndex, 1)[0];
              filteredList.splice(newIndex, 0, movedColumn);

              newdata.data = [
                ...filteredList, // The reordered filtered items
                ...newdata.data.filter((item) => item.show != '1'), // The items where show !== "1"
              ];

              dragVenueEnd(newdata);
            }
            if (
              tableConifg.value.mode === '2' &&
              tableConifg.value.unified === '2' &&
              tableConifg.value.currency_type === '1'
            ) {
              if (event.newIndex == 0 || event.newIndex == 1) {
                dragVenueEnd(dragTabList.value[getKey()][dragTabIndex.value].config[0]);
              }
              let oldIndex = event.oldIndex - 2;
              let newIndex = event.newIndex - 2;
              let newdata = dragTabList.value[getKey()][dragTabIndex.value].config[0];

              const filteredList = newdata.data.filter((item) => item.show == '1');

              const movedColumn = filteredList.splice(oldIndex, 1)[0];
              filteredList.splice(newIndex, 0, movedColumn);

              newdata.data = [
                ...filteredList, // The reordered filtered items
                ...newdata.data.filter((item) => item.show != '1'), // The items where show !== "1"
              ];

              dragVenueEnd(newdata);
            }
            scrollToPosition();
          },
        });
      }
    }, 500);
  }

  const scrollToPosition = async () => {
    await nextTick(); // Ensures the DOM is fully updated
    const tableElement = myTable.value?.$el;
    const tableBody = tableElement?.querySelector('.ant-table-body');
    if (tableBody) {
      tableBody.scrollLeft = tabLeft.value; // Set the scroll position
    }
  };

  // const tableConifg.unified_cur = ref('');
  const handleChange = (e) => {
    tableConifg.value.unified_cur = e.value + '';
    // console.log(111, e,tableConifg.value.unified_cur, currencyCodeMap[tableConifg.value.unified_cur]?.name);
  };
  const options_coin = computed(() => {
    let arr = [...suportedCurrency.value.fabi, ...suportedCurrency.value.crypto];
    arr = arr.map((item) => ({
      value: item,
      label: currencyCodeMap[item].name,
    }));
    return arr;
  });
  //动态获取当前 draglist的key
  function getKey() {
    if (tableConifg.value.mode === '1') {
      return 'vip';
    } else if (tableConifg.value.unified === '1') {
      return '0';
    } else if (tableConifg.value.currency_type === '1') {
      return currentFaCurrency.value;
    } else {
      return currentCCurrency.value;
    }
  }
  function changeVIPLevelActiveIndex(item, index) {
    VIPLevelActiveIndex.value = index;
    dragTabList.value.vip = allVipConfig.value[VIPLevelActiveIndex.value].config;
  }
  function changeLevelChooice(e) {
    forceUpdate.value += 1;
    if (e.target.value === '1') {
      dragTabList.value.vip = onlyVipConfig.value;
    } else {
      dragTabList.value.vip = allVipConfig.value[VIPLevelActiveIndex.value].config;
    }
  }
  function addRow(key) {
    forceUpdate.value += 1;
    const data = cloneDeep(dragTabList.value[key][dragTabIndex.value].config[0].data).map(
      (item) => {
        return {
          id: item.id,
          name: item.name,
          rate: '0',
        };
      },
    );
    dragTabList.value[key][dragTabIndex.value].config.push({
      level: dragTabList.value[key][dragTabIndex.value].config.length + 1 + '',
      valid_bet_amount: '0',
      rate: '0',
      data: data,
    });
  }
  function delRow(key) {
    dragTabList.value[key][dragTabIndex.value].config.pop();
  }
  async function getInitData() {
    loading.value = true;
    try {
      const allConfig = await getMemberRebateConfig();
      const isExit = getCurrencyList.some((el) => el.id === allConfig.unified_cur);
      if (!isExit) {
        allConfig.unified_cur = null;
      }
      tableConifg.value = {
        automatic1: allConfig.mode === '1' ? allConfig.automatic : '1',
        automatic2: allConfig.mode === '2' ? allConfig.automatic : '1',
        mode: allConfig.mode,
        levelChooice: '1',
        venue: '',
        unified: allConfig.unified,
        unified_cur: allConfig.unified_cur,
        currency_type: '1',
        unified_sum: allConfig.unified_sum || '1',
        settle_tz: allConfig.settle_tz,
        settle_at: allConfig.settle_at,
      };
      tableConifg.value.venue = allConfig.tiered[0].unified;
      allVipConfig.value = allConfig.vip;
      onlyVipConfig.value = cloneDeep(allConfig.vip[0].config);
      for (let key in dragTabList.value) {
        if (key === 'vip') {
          dragTabList.value[key] = onlyVipConfig.value;
        } else {
          dragTabList.value[key] = allConfig.tiered.filter((item) => item.currency_id === key);
        }
      }
      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }
  async function onUpdate() {
    let params = {
      automatic:
        tableConifg.value.mode === '1'
          ? tableConifg.value.automatic1
          : tableConifg.value.automatic2,
      mode: tableConifg.value.mode,
      unified: tableConifg.value.unified,
      unified_cur: tableConifg.value.unified_cur,
      unified_sum: tableConifg.value.unified_sum,
      vip: [] as any,
      tiered: [] as any,
      settle_tz: tableConifg.value.settle_tz,
      settle_at: tableConifg.value.settle_at,
    };
    //梯级赋值逻辑
    for (let key in dragTabList.value) {
      if (key !== 'vip') {
        console.log(key);
        params.tiered.push(...dragTabList.value[key]);
      }
    }

    params.tiered.forEach((item) => {
      item.unified = tableConifg.value.venue;
      //统一场馆
      if (tableConifg.value.venue === '1') {
        item.config.forEach((item2) => {
          item2.data.forEach((item3) => {
            item3.rate = item2.rate;
          });
        });
      } else {
        item?.config?.forEach((item2) => {
          //如果是梯级第一个可以为0
          const data222 = item2.data.find((item3) => item3.rate && item3.rate !== '0')?.rate;
          if (data222) {
            item2.rate = data222;
          }
        });
      }
    });
    console.log(params.tiered);

    if (!params.unified_cur) {
      message.error(t('modalForm.member.member_lv_model0'));
      return false;
    }

    //梯级校验数据
    let testSuccess = true;
    for (let key in dragTabList.value) {
      if (key !== 'vip') {
        const name = key === '0' ? '统一' : currencyCodeMap[key].name;
        // if (key == '706') {
        //   dragTabList.value[key].forEach((item) => {
        //     if (item.game_type != 7 && item.game_type != 5) {
        //       item?.config?.forEach((el) => {
        //         const allVenue0 = el.data.some((item3) => item3.rate === '0');
        //         if (allVenue0) {
        //           message.error(
        //             `梯级模式,${name}币种,${commomVenueList[item.game_type]}类型
        //          梯级${el.level},单独场馆返水比例,不能为0或者空`,
        //           );
        //           testSuccess = false;
        //         }
        //       });
        //     }
        //   });
        // }
        dragTabList.value[key].forEach((item) => {
          item?.config?.forEach((item2, index2) => {
            if (index2 !== 0) {
              if (!item2.valid_bet_amount || item2.valid_bet_amount === '0') {
                message.error(
                  `${t('modalForm.member.member_lv_model1', {
                    len1: name,
                    len2: commomVenueList[item.game_type],
                    len3: item2.level,
                  })}${t('modalForm.member.member_lv_model2')}`,
                );
                return (testSuccess = false);
              }
              if (tableConifg.value.venue === '1') {
                // 上一级的返水比例
                const lastRate = item.config[index2 - 1].rate;
                if (!item2.rate || item2.rate === '0') {
                  message.error(
                    `${t('modalForm.member.member_lv_model1', {
                      len1: name,
                      len2: commomVenueList[item.game_type],
                      len3: item2.level,
                    })}${t('modalForm.member.member_lv_model3')}`,
                  );
                  return (testSuccess = false);
                } else if (Number(item2.rate) < Number(lastRate)) {
                  message.error(
                    `${t('modalForm.member.member_lv_model1', {
                      len1: name,
                      len2: commomVenueList[item.game_type],
                      len3: item2.level,
                    })}${t('modalForm.member.member_lv_model4')}`,
                  );
                  return (testSuccess = false);
                }
              } else if (tableConifg.value.venue === '2') {
                const allVenue0 = item2.data.every((item3) => item3.rate === '0');
                if (allVenue0) {
                  message.error(
                    `${t('modalForm.member.member_lv_model1', {
                      len1: name,
                      len2: commomVenueList[item.game_type],
                      len3: item2.level,
                    })}${t('modalForm.member.member_lv_model5')}`,
                  );
                  testSuccess = false;
                } else {
                  const lastRateArr = item.config[index2 - 1].data.map((item3) => item3.rate);
                  item.config[index2].data.forEach((item3, index) => {
                    if (item3.show == 1) {
                      if (Number(item3.rate) < Number(lastRateArr[index])) {
                        message.error(
                          `${t('modalForm.member.member_lv_model1', {
                            len1: name,
                            len2: commomVenueList[item.game_type],
                            len3: item2.level,
                          })}${t('modalForm.member.member_lv_model6', { len: item3.name })}`,
                        );
                        testSuccess = false;
                      }
                    }
                  });
                }
              }
            }
          });
        });
      }
    }
    if (!testSuccess) return;
    //vip赋值逻辑
    if (tableConifg.value.levelChooice === '1') {
      for (let i = 0; i <= 100; i++) {
        params.vip[i] = {
          config: onlyVipConfig.value,
          level: `${i}`,
        };
      }
    } else {
      params.vip = allVipConfig.value;
    }
    params.vip.forEach((vipItem) => {
      vipItem.config.forEach((configItem) => {
        configItem.data.forEach((dataItem) => {
          dataItem.rate = dataItem.rate || '0';
        });
      });
    });
    console.log(params.tiered);
    params.tiered.forEach((vipItem) => {
      vipItem?.config?.forEach((configItem) => {
        configItem.rate = configItem.rate || '0';
        configItem.valid_bet_amount = configItem.valid_bet_amount || '0';
        configItem.data.forEach((dataItem) => {
          dataItem.rate = dataItem.rate || '0';
        });
      });
    });
    //防止组件报错
    params = cloneDeep(params);
    for (let key in params.vip) {
      if (!params.vip[key].config) params.vip[key].config = [];
      params.vip[key].config = JSON.stringify(params.vip[key].config);
    }
    for (let key in params.tiered) {
      if (!params.tiered[key].config) params.tiered[key].config = [];
      params.tiered[key].config = JSON.stringify(params.tiered[key].config);
    }
    const { status, data } = await updateMeberConfigRebate(params);
    if (status) {
      VIPLevelActiveIndex.value = 0;
      currentCurrencyFaIndex.value = 0;
      currentCurrencyCindex.value = 0;
      dragTabIndex.value = 0;
      currentFaCurrency.value = suportedCurrency.value.fabi?.[0] ?? '';
      currentCCurrency.value = '706';
      message.success(t('layout.setting.operatingTitle'));
      closeModal();
    } else {
      message.error(data);
    }
  }
</script>

<style scoped lang="less">
  .space-box {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }

  :deep(.ant-table-wrapper) {
    .ant-table-row:nth-of-type(odd) {
      background-color: transparent !important;
    }

    .ant-table-container > .ant-table-body > table > tbody > tr > td:first-child {
      background-color: #fff !important;
    }

    .ant-form-item {
      margin-bottom: 0 !important;
    }

    .ant-input-affix-wrapper {
      transition: all 0s;
    }

    .ant-input-group-addon {
      padding: 0 4px;
    }
  }

  :deep(.ant-table.ant-table-bordered)
    > .ant-table-container
    > .ant-table-content
    > table
    > thead
    > tr
    > th {
    border-right: 1px solid #e5e5e5 !important;
  }

  .text-overflow {
    display: inline-block;
    max-width: 40px; /* Adjust this width according to your layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-wrap {
    display: inline-block;
    max-width: 100%; /* Adjust this based on your layout */
    word-wrap: break-word; /* Allows breaking long words and wrapping text */
    white-space: normal; /* Allows text to wrap to a new line */
  }

  :deep(.drawborder) {
    .ant-form-item {
      margin-bottom: 14px !important;
    }
  }
</style>
<style>
  .drawborder {
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 10px 10px 0;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
  }

  .moveIcon {
    position: absolute;
    top: -8px;
    left: -9px;
  }
</style>
